<template>
	<view class="main">
		<view class="zhezhao" @click="close" v-show="ispopul"></view>
		<view class="top">
			<view class="title">
				<view class="">{{ activeFrom.title }}</view>
			</view>

			<view class="list">
				<view class="address">
					<image src="http://www.szzn.group/uploads/20221105/c6ba6830b0ca42cb6dde4f3e7db02332.png" mode=""></image>
					<text>地址：{{ activeFrom.province + activeFrom.city + activeFrom.district + activeFrom.detail }}</text>
				</view>
			</view>

			<view class="yuyuetime">
				<view class="datetime" v-for="(item, index) in datatimeList" :key="item.id">
					<van-radio-group :value="radio" @change="changeo">
						<van-radio icon-size="18px" checked-color="#07c160" :name="index + 1">{{ item.date }}</van-radio>
					</van-radio-group>
				</view>
				<view class="more" @click="more" v-if="activeFrom.date_list.length > 2">
					<text>更多场次</text>
					<image src="http://www.szzn.group/uploads/20221105/38e8a4fe800a8066cea270270538b0a9.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="middle">
			<view class="count">
				<view class="">数量</view>
				<view class="fuhao">
					<view @click="count(-1)" class="fuhao-jian">-</view>
					<view class="fuhao-num">{{ total_num }}</view>
					<view @click="count(1)" class="fuhao-jia">+</view>
				</view>
			</view>

			<view class="total">
				<view class="" ref="inp">合计</view>
				<view class="total-price">￥{{ dataList.event_price }}</view>
			</view>
		</view>

		<view class="">
			<view class="person"><view class="">填写个人信息</view></view>
			<view class="inputname"><input type="text" v-model="name" placeholder="请输入姓名" /></view>
		</view>
		<view class="person"><view class="">填写手机号</view></view>

		<view class="inputname"><input type="number" maxlength="11" v-model="phone" placeholder="请输入手机号" /></view>
		<view class="fooder" @click="submit"><view class="">提交预约</view></view>

		<view class="popul" v-show="ispopul">
			<view class="title">
				<view class="" @click="close">取消</view>
				<view class="sure" @click="confirm">确定</view>
			</view>
			<view class="waike">
				<view class="datetime" v-for="(item, index) in datatimeList1" :key="item.id">
					<van-radio-group :value="radio" @change="changeo">
						<van-radio icon-size="18px" checked-color="#07c160" :name="index + 3">{{ item.date }}</van-radio>
					</van-radio-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { activeDetail, getDate, getPrice, activeApply } from '@/api/api.js';
export default {
	data() {
		return {
			ispopul: false,
			activeFrom: {},
			dataList: '',
			from: {},
			radio: '',
			total_num: 1,
			price: '',
			mark: '',
			name: '',
			phone: '',
			event: '',
			priceId: '',
			datatimeList: [],
			datatimeList1: []
		};
	},
	onLoad(options) {
		this.activeId = options.id;
		this.init(this.activeId);
		this.getDate(this.activeId);
		this.getPrice(this.activeId);
	},
	// 分享
	onShareAppMessage() {
		return {
			title: this.activeFrom.title,
			path: 'page_home/activemake/activemake?id=' + this.activeId
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: this.activeFrom.title,
			path: 'page_home/activemake/activemake?id=' + this.activeId
		};
	},
	methods: {
		init(id) {
			let data = `id=${id}`;
			activeDetail(data).then(res => {
				this.activeFrom = res.data.data.activity;
				if (this.activeFrom.date_list.length > 2) {
					this.datatimeList = this.activeFrom.date_list.slice(0, 2);
					this.datatimeList1 = this.activeFrom.date_list.slice(0, 2);
				} else {
					this.datatimeList = this.activeFrom.date_list;
				}
			});
		},
		// 购买数量
		count(type, price) {
			if (type == -1) {
				if (this.total_num == 1) return;
				this.total_num = this.total_num - 1;
				this.dataList.event_price = (parseFloat(this.price) * parseFloat(this.total_num)).toFixed(2);
			} else {
				this.total_num = this.total_num + 1;
				this.dataList.event_price = (parseFloat(this.price) * parseFloat(this.total_num)).toFixed(2);
			}
		},
		// 获取价格
		getPrice(id) {
			let data = `id=${id}`;
			getPrice(data).then(res => {
				this.dataList = res.data.data[0];
				this.priceId = this.dataList.id;
				this.price = this.dataList.event_price;
			});
		},
		// 更多场次
		more() {
			this.ispopul = true;
		},
		close() {
			this.ispopul = false;
		},
		confirm() {
			if (this.radio <= 2)
				return uni.showToast({
					title: '请选择日期',
					duration: 1500
				});
			this.ispopul = false;
		},
		getDate(id) {
		},
		// 选择日期
		changeo(event) {
			this.radio = event.detail;
		},
		submit() {
			if (uni.getStorageSync('token') == '' || uni.getStorageSync('token') == null) {
				uni.showModal({
					title: '提示',
					content: '未登入,请先登入',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/page_login/index/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			if (this.radio == '')
				return uni.showToast({
					title: '请选择活动日期',
					duration: 1500
				});
			if (this.name == '')
				return uni.showToast({
					title: '请填写姓名',
					duration: 1500
				});
			if (this.phone == '')
				return uni.showToast({
					title: '请填写手机号',
					duration: 1500
				});
			let reg = /^1[3-9]{1}[0-9]{9}$/;
			if (!reg.test(this.phone))
				return uni.showToast({
					title: '手机号格式不正确',
					duration: 1500
				});

			for (let i = 0; i < this.activeFrom.date_list.length; i++) {
				this.mark = this.activeFrom.date_list[this.radio - 1].date;
			}
			this.event = {
				name: this.name,
				phone: this.phone
			};

			uni.showLoading({
				title: '加载中'
			});
			let data1 = {
				special_id: this.activeId,
				pay_type_num: 20,
				payType: 'weixin',
				from: 'weixin',
				price_id: this.priceId,
				mark: this.mark,
				event: this.event,
				total_num: this.total_num
			};
			activeApply(data1).then(res => {
				if (res.data.code == '200') {
					if (res.data.code == '200') {
						uni.hideLoading();
						let obj = res.data.data.result.jsConfig;
						uni.requestPayment({
							provider: 'wxpay', // 服务提提供商
							appId: obj.appid,
							timeStamp: obj.timestamp, // 时间戳
							nonceStr: obj.nonceStr, // 随机字符串
							package: obj.package,
							signType: obj.signType, // 签名算法
							paySign: obj.paySign, // 签名
							success: function(red) {
								uni.showToast({
									title: '支付成功',
									duration: 1000
								});
								let time = setTimeout(() => {
									uni.navigateTo({
										url: '/myIndex/subscribeApply/subscribeApply'
									});
								}, 500);
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									duration: 2000,
									icon:'error'
								});
							}
						});
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon:'error'
						});
					}
				} else {
					uni.hideLoading();
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon:'error'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.main {
	background-color: #fafafa;
	height: 100vh;
}
.zhezhao {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 99;
}
.top {
	background-color: #fff;
	padding: 30rpx;
}

.list {
	margin-top: 60rpx;
}

.address {
	margin-bottom: 20rpx;
	font-size: 28rpx;

	// color: #aaa;
	image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
		margin-top: -5rpx;
		margin-right: 10rpx;
	}
}

.middle {
	margin-top: 15rpx;
	background-color: #fff;

	.count {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
		border-bottom: 1px solid #eee;

		.fuhao {
			display: flex;

			.fuhao-jian {
				border-radius: 50%;
				border: 1px solid #3db963;
				// padding: 5rpx;
				width: 50rpx;
				height: 50rpx;
				text-align: center;
			}

			.fuhao-jia {
				border-radius: 50%;
				// border: 1px solid #3db963;
				background-color: #3db963;
				color: #fff;
				width: 50rpx;
				height: 50rpx;
				text-align: center;
			}

			.fuhao-num {
				padding: 5rpx 20rpx 0;
			}
		}
	}

	.total {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;

		.total-price {
			color: #de1f1f;
		}
	}
}

.fooder {
	position: fixed;
	bottom: 0;
	background-color: #fff;
	padding: 20rpx 80rpx;

	// width: 100%;
	view {
		background-color: #3db963;
		color: #fff;
		padding: 30rpx 120rpx;
		width: 100%;
		border-radius: 50px;
		text-align: center;
	}
}

.person {
	padding: 25rpx;
}

.inputname {
	padding: 0 20rpx;

	input {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
	}
}

.verificationcode {
	margin-top: 15rpx;
	display: flex;
	padding: 0 20rpx;

	input {
		background-color: #fff;
		flex: 1;
		padding: 20rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
	}

	button {
		background-color: #4cd964;
		color: #fff;
		font-size: 30rpx;
		margin-left: 20rpx;
	}
}

.datetime {
	border-radius: 8rpx;
	border: 1px solid #3db963;
	font-size: 28rpx;
	padding: 15rpx;
	margin-bottom: 20rpx;
	// width: 160rpx;
}

.more {
	font-size: 28rpx;
	color: #ccc;

	image {
		width: 28rpx;
		height: 28rpx;
		vertical-align: middle;
		margin-left: 8rpx;
	}
}

::v-deep van-radio-group {
	display: flex;
}

.popul {
	position: fixed;
	bottom: 0;
	height: 600rpx;
	right: 0;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	width: 100%;
	animation: move 0.3s;
	// padding: 20rpx;
	z-index: 100;
	.title {
		padding: 20rpx;
		// width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 12rpx;
		.sure {
			color: #3db963;
		}
	}
	.waike {
		padding: 0 40rpx;
		height: 450rpx;
		overflow: hidden;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.waike::-webkit-scrollbar {
		display: none;
	}
	// width: 100%;
}
@keyframes move {
	0% {
		height: 0;
	}
	100% {
		height: 600rpx;
	}
}
</style>
